import NewSiteWindow from "@/app/[language]/site/components/NewSiteWindow";
import SiteCipherWindow from "@/app/[language]/site/components/SiteCipherWindow";
import wsAPI from "@/app/[language]/site/lib/wsAPI";

import useGetSites from "@/app/[language]/site/query/useGetSites";
import sc from "@/assets/sc.png";

import sc0 from "@/assets/sc0.png";
import sc2 from "@/assets/sc2.png";

import { useSiteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useState } from "react";
import { Button, Col, Modal, Row } from "reactstrap";

const EventPB = require("@/Event_pb");

const scs = [sc0, "", sc2];

export default observer(() => {
  const {
    siteAvatarID,
    isSiteWindowOpened,
    setSiteWindowOpened,
    setSiteCipherWindowOpened,
    targetSiteID,
    setNewSiteWindowOpened,
  } = useSiteStore();
  const t = useTranslations();

  const [siteID, setSiteID] = useState("");
  const [siteName, setSiteName] = useState("");

  const { data: sites } = useGetSites();

  const onClose = () => {
    setSiteWindowOpened(false);
  };

  return (
    <Modal isOpen={isSiteWindowOpened} toggle={onClose} centered>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          {sites.map(
            ({ siteID, hasCipher, siteConfigure, siteName, avatarCount }) => (
              <Row
                key={siteID}
                className={`g-0 route ${targetSiteID === siteID ? "target" : ""}`}
                onClick={() => {
                  if (hasCipher) {
                    setSiteID(siteID);
                    setSiteName(siteName);
                    setSiteCipherWindowOpened(true);
                  } else {
                    wsAPI.send({
                      eventID: EventPB.Event.EventID.ENTER_SITE,
                      text: JSON.stringify({ siteID, siteCipher: "" }),
                    });
                    onClose();
                  }
                }}
              >
                <Col className="m-1" xs="auto">
                  {scs[siteConfigure] && (
                    <Image alt="" src={scs[siteConfigure]} height={24} />
                  )}{" "}
                  <span>
                    {siteName} ({t("avatarCountText", { avatarCount })})
                    {hasCipher && (
                      <>
                        {" "}
                        <Image alt="" src={sc} height={24} />
                      </>
                    )}
                  </span>
                </Col>
              </Row>
            ),
          )}
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button
            onClick={() => {
              setNewSiteWindowOpened(true);
            }}
            disabled={!siteAvatarID}
          >
            {t("siteWindowNew")}
          </Button>
        </Col>
      </Row>

      <SiteCipherWindow siteID={siteID} siteName={siteName} />
      <NewSiteWindow />
    </Modal>
  );
});